<template>
  <section class="content" title="首页展示内容">
    <div v-for="(item, index) in contentList" :key="index">
      <!-- 轮播图 -->
      <div class="content-item no-border" v-if="item.module == 10">
        <section class="swipe" title="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(map, index) in item.banners" :key="index">
              <van-image width="100%" lazy-load :src="map.cover" />
            </van-swipe-item>
          </van-swipe>
        </section>
      </div>
      <!-- 页内导航 -->
      <div class="content-item no-border" v-else-if="item.module == 49">
        <nav class="nav">
          <div
            class="nav-item"
            v-for="(nav, index) in item.shortCut"
            :key="index"
            @click.stop="toNavDetail(nav)"
          >
            <div
              class="img-box"
              :style="{ backgroundImage: `url(${nav.cover})` }"
            ></div>
            <div class="nav-title">{{ nav.title }}</div>
          </div>
        </nav>
      </div>
      <!-- 一块横向，加上三个横向小卡片 -->
      <div class="content-item" v-else-if="item.module == 52">
        <div class="content-item-title">{{ item.name }}</div>
        <HomeCardItem1 :item="item?.list[0]" />
        <div class="sec">
          <HomeCardItem2
            :width="'20%'"
            v-for="(map, index) in item?.list?.slice(1, 5)"
            :key="index"
            :item="map"
          />
        </div>
      </div>
      <!-- 全部站位一行 -->
      <div
        class="content-item"
        v-else-if="item.module == 36 || item.module == 53"
      >
        <div class="content-item-title">{{ item.name }}</div>
        <div class="sec-type">
          <HomeCardItem1
            v-for="(map, index) in item?.list"
            :key="index"
            :item="map"
            :showImmediateRead="item.module == 36 ? false : true"
          />
        </div>
      </div>
      <!-- 全部横向排版 -->
      <div
        class="content-item"
        v-else-if="item.module == 34 || item.module == 58"
      >
        <div class="content-item-title">{{ item.name }}</div>
        <div class="sec">
          <HomeCardItem2
            :width="`${item.module == 34 ? '30%' : '20%'}`"
            v-for="(map, index) in item?.list"
            :key="index"
            :item="map"
          />
        </div>
      </div>
      <!-- 全部横版站位倒计时 -->
      <div class="content-item" v-else-if="item.module == 45">
        <div class="content-item-title">{{ item.name }}</div>
        <div class="sec">
          <HomeCardItem2
            :width="'30%'"
            v-for="(map, index) in item?.list"
            :key="index"
            :item="map"
            :countdown="true"
          />
        </div>
      </div>
      <!-- 横版两列站位 -->
      <div class="content-item" v-else-if="item.module == 51">
        <div class="content-item-title">{{ item.name }}</div>
        <div class="sec">
          <HomeCardItem3
            :width="'50%'"
            v-for="(map, index) in item?.list"
            :key="index"
            :item="map"
          />
        </div>
      </div>
      <!-- 图片广告 -->
      <div class="content-item" v-else-if="item.module == 46">
        <HomeCardItem4 :item="item" />
      </div>
    </div>
    <div class="footer">我是有底线的٩(◕‿◕｡)۶</div>
  </section>
</template>

<script>
import HomeCardItem1 from "@/components/home/HomeCardItem1.vue";
import HomeCardItem2 from "@/components/home/HomeCardItem2.vue";
import HomeCardItem3 from "@/components/home/HomeCardItem3.vue";
import HomeCardItem4 from "@/components/home/HomeCardItem4.vue";
export default {
  components: {
    HomeCardItem1,
    HomeCardItem2,
    HomeCardItem3,
    HomeCardItem4,
  },
  props: ["contentList"],
  methods:{
    toNavDetail(nav){
      console.log(nav);
      this.$router.push({
        name:'ranking',
        params:{
          url:nav.url
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  padding: 0 0.1rem 0.9rem 0;
  .content-item {
    width: 100%;
    border-top: 0.01rem solid var(--border-gray);
    padding-bottom: 0.15rem;
    background-color: var(--bgc-white);
    .swipe {
      width: 100%;
      height: 1.3rem;
      max-height: 1.3rem;
      overflow: hidden;
      .my-swipe .van-swipe-item {
        background-color: var(--bgc-white);
        font-size: 0;
      }
    }
    .nav {
      width: 100%;
      padding: 0.1rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nav-item {
        width: 0.68rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .img-box {
          width: 0.35rem;
          min-width: 0.35rem;
          height: 0.35rem;
          border-radius: 50%;
          overflow: hidden;
        }
        .nav-title {
          font-size: 0.14rem;
          line-height: 0.14rem;
          margin-top: 0.1rem;
          color: var(--text-balck);
        }
      }
    }
    .content-item-title {
      font-size: 0.2rem;
      font-weight: bold;
      margin: 0.15rem 0;
    }
    .sec-type {
      > div {
        margin: 0.15rem 0;
      }
    }
    .sec {
      margin-top: 0.2rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
  .no-border {
    border-top: none;
    padding-bottom: 0;
  }
  .footer {
    position: absolute;
    left: -0.15rem;
    bottom: 0.5rem;
    width: 100vw;
    height: 0.45rem;
    background-color: var(--bgc-gray5);
    line-height: 0.45rem;
    text-align: center;
    color: var(--text-gray);
    font-size: 0.13rem;
  }
}
</style>